<template>
  <div class="menu">
    <div class="bottom">
      <el-card>
        <pageBottom
          ref="pageBottomIns"
          :pageBottomConfig="pageBottomConfig"
          @handleAddUser="handleAddUser"
        >
          <template #default="{ row: { createtime } }">
            <h3>{{ formateDate(createtime) }}</h3>
          </template>
          <template #red="{ row: { createtime } }">
            <h3 style="color: red">{{ formateDate(createtime) }}</h3>
          </template>
          <template #blue="{ row: { updatetime } }">
            <h3 style="color: blue">{{ formateDate(updatetime) }}</h3>
          </template>
        </pageBottom>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import pageBottom from '@/components/multiplex/pageBottom.vue'
import { formateDate } from '@/utils/formatTime'
// @ts-ignore
import pageBottomConfig from '@/global/menu/pageBottom.config'

import usePageSame from '@/hooks/usePageSame'
const { pageBottomIns, handleAddUser } = usePageSame()
</script>

<style lang="scss" scoped>
.menu {
  width: 100%;
  position: absolute;
}

.top,
.bottom {
  width: 100%;
}
.top {
  margin-bottom: 20px;
}
</style>
